<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram Fig. 3.30</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="circuitCanvas" width="600" height="480"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings to mimic the hand-drawn look
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 3;
        ctx.lineCap = 'round';
        ctx.lineJoin = 'round';
        ctx.font = '22px "Comic Sans MS", "Chalkduster", cursive';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Helper function to draw a vertical resistor
        function drawResistor(x, y, h) {
            const w = 15; // width of zigzag
            const n_segments = 8;
            const segment_h = h / n_segments;
            ctx.moveTo(x, y);
            ctx.lineTo(x - w, y + 1 * segment_h);
            ctx.lineTo(x + w, y + 2 * segment_h);
            ctx.lineTo(x - w, y + 3 * segment_h);
            ctx.lineTo(x + w, y + 4 * segment_h);
            ctx.lineTo(x - w, y + 5 * segment_h);
            ctx.lineTo(x + w, y + 6 * segment_h);
            ctx.lineTo(x - w, y + 7 * segment_h);
            ctx.lineTo(x, y + h);
        }

        // Helper function to draw a vertical inductor
        function drawInductor(x, y, h) {
            const r = 12; // radius of coil
            const n_coils = 3;
            const wire_len = (h - (n_coils * 2 * r))/2;
            
            let currentY = y;
            ctx.moveTo(x, currentY);
            currentY += wire_len;
            ctx.lineTo(x, currentY);
            
            for(let i=0; i < n_coils; i++) {
                ctx.arc(x - r, currentY + r, r, -Math.PI / 2, Math.PI / 2, false);
                currentY += 2 * r;
            }
            ctx.moveTo(x, currentY);
            ctx.lineTo(x, y + h);
        }

        // --- Start Drawing ---
        
        ctx.beginPath();

        // Left part: Voltage source and R1
        // Top wire from source to switch
        ctx.moveTo(100, 100);
        ctx.lineTo(250, 100);

        // Voltage Source
        const battX = 100, battY = 120, battH = 40;
        ctx.moveTo(100, 100);
        ctx.lineTo(battX, battY); // wire to battery
        ctx.moveTo(battX - 25, battY); // long plate (+)
        ctx.lineTo(battX + 25, battY);
        ctx.moveTo(battX - 15, battY + battH); // short plate (-)
        ctx.lineTo(battX + 15, battY + battH);
        ctx.moveTo(battX, battY + battH);
        ctx.lineTo(battX, 210); // wire from battery
        ctx.fillText('2V', battX - 45, battY + battH / 2);
        ctx.fillText('+', battX + 35, battY);
        ctx.fillText('-', battX + 35, battY + battH);
        
        // Resistor R1
        drawResistor(100, 210, 100);
        ctx.moveTo(100, 310);
        ctx.lineTo(100, 380); // wire from R1 to bottom rail
        ctx.save();
        ctx.translate(65, 260);
        ctx.rotate(-Math.PI / 2);
        ctx.fillText('R1=3Ω', 0, 0);
        ctx.restore();

        // Bottom wire
        ctx.moveTo(100, 380);
        ctx.lineTo(500, 380);

        // Switch
        const sx = 250, sy = 100; // pivot
        const ax = 300, ay = 120; // contact A
        const bx = 300, by = 80;  // contact B
        const cx = 420, cy = 120; // contact C
        // Draw arm first
        ctx.moveTo(sx, sy);
        ctx.lineTo(ax, ay);
        // Draw contacts and pivot on top
        ctx.stroke(); // Stroke the wires drawn so far
        ctx.beginPath(); // Start a new path for filled circles
        ctx.arc(sx, sy, 5, 0, 2 * Math.PI); // pivot
        ctx.fill();
        ctx.stroke(); // Stroke the pivot outline
        ctx.beginPath();
        ctx.arc(bx, by, 4, 0, 2 * Math.PI); // contact B
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(cx, cy, 4, 0, 2 * Math.PI); // contact C
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(ax, ay, 4, 0, 2 * Math.PI); // contact A
        ctx.stroke();
        // Labels
        ctx.fillText('A', ax - 25, ay + 5);
        ctx.fillText('B', bx, by - 20);
        ctx.fillText('C', cx + 25, cy + 5);

        // Branch A (connected)
        ctx.beginPath();
        ctx.moveTo(ax, ay);
        ctx.lineTo(300, 160); // wire down from A
        ctx.moveTo(300, 160); // T-junction
        ctx.lineTo(280, 160); // To R2
        ctx.moveTo(300, 160); // T-junction
        ctx.lineTo(320, 160); // To L1/R3
        ctx.moveTo(280, 160);
        ctx.lineTo(280, 380); // R2 position
        ctx.moveTo(320, 160);
        ctx.lineTo(320, 380); // L1/R3 position
        
        drawResistor(280, 160, 220); // R2
        ctx.save();
        ctx.translate(245, 270);
        ctx.rotate(-Math.PI / 2);
        ctx.fillText('R2=2Ω', 0, 0);
        ctx.restore();

        drawInductor(320, 160, 110); // L1
        drawResistor(320, 270, 110); // R3
        ctx.fillText('L1=5H', 365, 215);
        ctx.fillText('R3=1/2Ω', 375, 325);

        // Branch C (unconnected)
        ctx.moveTo(cx, cy);
        ctx.lineTo(420, 160); // wire down from C
        ctx.moveTo(420, 160); // T-junction
        ctx.lineTo(400, 160); // To R4
        ctx.moveTo(420, 160); // T-junction
        ctx.lineTo(440, 160); // To L2/R5
        ctx.moveTo(400, 160);
        ctx.lineTo(400, 380); // R4 position
        ctx.moveTo(440, 160);
        ctx.lineTo(440, 380); // L2/R5 position

        drawResistor(400, 160, 220); // R4
        ctx.save();
        ctx.translate(365, 270);
        ctx.rotate(-Math.PI / 2);
        ctx.fillText('R4=2Ω', 0, 0);
        ctx.restore();

        drawInductor(440, 160, 110); // L2
        drawResistor(440, 270, 110); // R5
        ctx.fillText('L2=5H', 485, 215);
        ctx.fillText('R5=1/2Ω', 495, 325);

        // Stroke all component paths
        ctx.stroke();
        
        // Figure Caption
        ctx.fillText('Fig. 3.30', 300, 450);

    </script>
</body>
</html>